<div class="flex items-center justify-start h-10 param-box-header">
  <eo-ng-radio-group [(ngModel)]="bodyType" (ngModelChange)="changeBodyType()">
    <label *ngFor="let item of CONST.API_BODY_TYPE" eo-ng-radio [nzValue]="item.value">{{ item.key }}</label>
  </eo-ng-radio-group>
  <!--Select content-type-->

  <!-- Import -->
  <div *ngIf="[TYPE_API_BODY.FormData].includes(bodyType)" class="inline-flex items-center">
    <nz-divider nzType="vertical"></nz-divider>
    <params-import [baseData]="model" [contentType]="IMPORT_MUI[bodyType]" (baseDataChange)="handleParamsImport($event)"> </params-import>
  </div>

  <div *ngIf="[TYPE_API_BODY.Raw, TYPE_API_BODY.FormData].includes(bodyType)">
    <nz-divider nzType="vertical"></nz-divider>
    <span class="text-[12px]">Content-Type：</span>
    <eo-ng-select
      class="text-[12px]"
      [nzDropdownMatchSelectWidth]="false"
      (ngModelChange)="changeContentType($event)"
      [(ngModel)]="contentType"
      nzBorderless
    >
      <eo-ng-option *ngFor="let item of CONST.CONTENT_TYPE[bodyType]" [nzValue]="item.value" [nzLabel]="item.title"></eo-ng-option>
    </eo-ng-select>
  </div>
</div>
<!-- FormData -->
<eo-ng-table-pro
  *ngIf="[TYPE_API_BODY['FormData']].includes(bodyType)"
  [columns]="listConf.columns"
  [nzDataItem]="itemStructure"
  [setting]="listConf.setting"
  [(nzData)]="model"
  (nzDataChange)="emitModelChange()"
></eo-ng-table-pro>
<ng-template #formValue let-item="item" let-rowItem="rowItem" let-index="index">
  <div [ngSwitch]="item.dataType">
    <input
      *ngSwitchDefault
      placeholder="{{ rowItem.placeholder }}"
      eo-ng-input
      maxlength="{{ rowItem.maxlength }}"
      [(ngModel)]="item.paramAttr.example"
      (ngModelChange)="emitModelChange()"
    />
    <div *ngSwitchCase="API_PARAMS_TYPE.file">
      <label class="cursor-pointer px-[5px] py-[3px] border-all rounded" for="file_{{ index }}" i18n>Choose Files</label>
      <span class="ml-[10px]" *ngIf="item.files?.length">{{ item.files?.length }} <span i18n>files selected</span></span>
      <span class="ml-[10px]" *ngIf="!item.files?.length" i18n>No file chosen</span>
      <input id="file_{{ index }}" multiple type="file" class="invisible" (change)="formdataSelectFiles($event.target, item)" />
    </div>
  </div>
</ng-template>
<!-- JSON -->
<!-- XML -->
<!-- Raw -->
<eo-monaco-editor
  (codeChange)="rawDataChange($event)"
  *ngIf="bodyType === TYPE_API_BODY.Raw && model[0]"
  [(code)]="model[0].binaryRawData"
  [autoHeight]="true"
  [editorType]="editorType"
  [config]="editorConfig"
  [eventList]="['type', 'format', 'copy', 'search', 'replace']"
  #rawEditor
>
</eo-monaco-editor>
<!-- Binary -->
<div class="px-5 min-h-[60%]" *ngIf="bodyType === TYPE_API_BODY.Binary && model[0]">
  <nz-upload
    nzType="drag"
    [nzBeforeUpload]="uploadBinary"
    [nzShowUploadList]="{ showDownloadIcon: false, showRemoveIcon: true }"
    [(nzFileList)]="binaryFiles"
  >
    <p class="ant-upload-text" i18n>Tap or drag files directly to this area</p>
  </nz-upload>
</div>
